<template>
  <div class="padding-15">
    <div class="bg-fff padding-15 margin-bottom-15">
      <a-form
        ref="test"
        :label-col="{
          xl: { span: 10 },
          lg: { span: 10 },
          md: { span: 10 },
          sm: { span: 10 }
        }"
        :wrapper-col="{
          xl: { span: 17 },
          lg: { span: 19 },
          md: { span: 17 },
          sm: { span: 20 }
        }"
      >
        <a-row :gutter="24">
          <a-col :md="6" :sm="6" :xs="6">
            <a-form-item label="旧货小类">
              <a-select
                allow-clear
                placeholder="请选择"
                optionFilterProp="label"
                :options="searchData[0]?.options"
                v-model:value="form.subclass_code"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="6" :xs="6">
            <a-form-item label="成色">
              <a-select
                allow-clear
                placeholder="请选择"
                optionFilterProp="label"
                :options="searchData[1]?.options"
                v-model:value="form.quality_code"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="6" :xs="6">
            <a-form-item label="品类">
              <a-select
                allow-clear
                placeholder="请选择"
                optionFilterProp="label"
                :options="searchData[2]?.options"
                v-model:value="form.classes_code"
              />
            </a-form-item>
          </a-col>
          <template v-if="!searchExpand">
            <a-col :md="6" :sm="6" :xs="6">
              <a-form-item label="旧货类型">
                <a-select
                  allow-clear
                  placeholder="请选择"
                  optionFilterProp="label"
                  :options="searchData[3]?.options"
                  v-model:value="form.junk_type"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="6" :xs="6">
              <a-form-item label="旧货标记">
                <a-select
                  allow-clear
                  placeholder="请选择"
                  optionFilterProp="label"
                  :options="searchData[4]?.options"
                  v-model:value="form.junk_target_code"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="6" :xs="6">
              <a-form-item label="原条码">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  v-model:value="form.bar_code"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="6" :xs="6">
              <a-form-item label="会员手机">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  v-model:value="form.mobile"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="6" :xs="6">
              <a-form-item label="原售单位">
                <a-select
                  allow-clear
                  placeholder="请选择"
                  optionFilterProp="label"
                  :options="searchData[5]?.options"
                  v-model:value="form.original_type"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="6" :xs="6">
              <a-form-item label="换购形式">
                <a-select
                  allow-clear
                  placeholder="请选择"
                  optionFilterProp="label"
                  :options="searchData[6]?.options"
                  v-model:value="form.exchange_form"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="6" :xs="6">
              <a-form-item label="换购方式">
                <a-select
                  allow-clear
                  placeholder="请选择"
                  optionFilterProp="label"
                  :options="searchData[7]?.options"
                  v-model:value="form.exchange_type"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="6" :xs="6">
              <a-form-item label="换购小类">
                <a-select
                  allow-clear
                  placeholder="请选择"
                  optionFilterProp="label"
                  :options="searchData[8]?.options"
                  v-model:value="form.exchange_subclass_code"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="6" :xs="6">
              <a-form-item label="现金重">
                <div class="flex align-center">
                  <a-input
                    class="w45p"
                    allow-clear
                    placeholder="请输入"
                    v-model:value="form.gold_weight_min"
                  />
                  <div class="w5p text-center">—</div>
                  <a-input
                    class="w45p"
                    allow-clear
                    placeholder="请输入"
                    v-model:value="form.gold_weight_max"
                  />
                </div>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="6" :xs="6">
              <a-form-item label="抵扣金额">
                <div class="flex align-center">
                  <a-input
                    class="w45p"
                    allow-clear
                    placeholder="请输入"
                    v-model:value="form.deduct_amount_min"
                  />
                  <div class="w5p text-center">—</div>
                  <a-input
                    class="w45p"
                    allow-clear
                    placeholder="请输入"
                    v-model:value="form.deduct_amount_max"
                  />
                </div>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="6" :xs="6">
              <a-form-item label="换购金重">
                <div class="flex align-center">
                  <a-input
                    class="w45p"
                    allow-clear
                    placeholder="请输入"
                    v-model:value="form.lumping_weight_min"
                  />
                  <div class="w5p text-center">—</div>
                  <a-input
                    class="w45p"
                    allow-clear
                    placeholder="请输入"
                    v-model:value="form.lumping_weight_max"
                  />
                </div>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="6" :xs="6">
              <a-form-item label="换购时间">
                <div class="flex align-center">
                  <a-input
                    class="w45p"
                    allow-clear
                    placeholder="请输入"
                    v-model:value="form.create_start_time"
                  />
                  <div class="w5p text-center">—</div>
                  <a-input
                    class="w45p"
                    allow-clear
                    placeholder="请输入"
                    v-model:value="form.create_end_time"
                  />
                </div>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="6" :xs="6">
              <a-form-item label="标签价">
                <div class="flex align-center">
                  <a-input
                    class="w45p"
                    allow-clear
                    placeholder="请输入"
                    v-model:value="form.mobile"
                  />
                  <div class="w5p text-center">—</div>
                  <a-input
                    class="w45p"
                    allow-clear
                    placeholder="请输入"
                    v-model:value="form.mobile"
                  />
                </div>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="6" :xs="6">
              <a-form-item label="货重">
                <div class="flex align-center">
                  <a-input
                    class="w45p"
                    allow-clear
                    placeholder="请输入"
                    v-model:value="form.piece_weight_min"
                  />
                  <div class="w5p text-center">—</div>
                  <a-input
                    class="w45p"
                    allow-clear
                    placeholder="请输入"
                    v-model:value="form.piece_weight_max"
                  />
                </div>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="6" :xs="6">
              <a-form-item label="宝石类别">
                <a-select
                  allow-clear
                  placeholder="请选择"
                  optionFilterProp="label"
                  :options="searchData[9]?.options"
                  v-model:value="form.gem_category_code"
                />
              </a-form-item>
            </a-col>
          </template>
          <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
            <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
              <a-space>
                <a-button type="primary" @click="search">查询</a-button>
                <a-button @click="reset">重置</a-button>
                <a @click="toggleExpand">
                  <span v-if="!searchExpand">
                    收起 <up-outlined class="ele-text-small" />
                  </span>
                  <span v-else>
                    展开 <down-outlined class="ele-text-small" />
                  </span>
                </a>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="bg-fff padding-15">
      <a-space>
        <a-button @click="daochu()">导出</a-button>
        <a-button>库存初始化</a-button>
      </a-space>
    </div>
    <div class="junk-box">
      <div class="bg1">
        <div class="t t2">销售单号</div>
        <div class="t t2">库存位置</div>
        <div class="t t2">旧货编码</div>
        <div class="t t2">数量</div>
        <div class="t t2">旧货类型</div>
        <div class="t t2">旧货小类</div>
        <div class="t t2">金料类型</div>
        <div class="t t2">成色</div>
        <div class="t t2">品类</div>
        <div class="t t2">原售单位</div>
        <div class="t t2">旧货标记</div>
        <div class="t t2">标签价</div>
        <div class="t t2">宝石类别</div>
        <div class="t t2">主石重量</div>
        <div class="t t2">主石数量</div>
        <div class="t t2">主石颜色</div>
        <div class="t t2">主石净度</div>
        <div class="t t2">主石切工</div>
        <div class="t t2">副石重量</div>
        <div class="t t2">副石数量</div>
        <div class="t t2">换购金价</div>
        <div class="t t2">原金重(g)</div>
        <div class="t t2">货重(g)</div>
        <div class="t t2">现金重(g)</div>
        <div class="t t2">折足重(g)</div>
        <div class="t t2">换购工费</div>
        <div class="t t2">折扣金额</div>
        <div class="t t2">换购形式</div>
        <div class="t t2">换购方式</div>
        <div class="t t2">换购小类</div>
        <div class="t t2">分抵金额</div>
        <div class="t t2">会员姓名</div>
        <div class="t t2">会员手机</div>
        <div class="t t2">主销导购</div>
        <div class="t t2">辅销导购</div>
        <div class="t t2">原条码（旧货的）</div>
        <div class="t t2">备注</div>
        <div class="t t2">图片</div>
        <div class="t t2">换购时间</div>
        <div class="t t2">操作</div>
      </div>
      <div class="bg3">
        <div style="min-width: 100%">
          <div class="w" v-for="(item, index) in tableData" :key="index">
            <div class="t3 flex align-center justify-center">{{
              item.order_sn || ''
            }}</div>
            <div class="t3 flex align-center justify-center">
              <div class="flex1">
                <template v-for="(m, mindex) in item.junk" :key="mindex">
                  <div class="padding-y-10 border-b">{{
                    m.type_code_name || ''
                  }}</div>
                </template>
              </div>
            </div>
            <div class="t3 flex align-center justify-center">
              <div>
                <template v-for="(m, mindex) in item.junk" :key="mindex">
                  <div class="padding-y-10 border-b">{{
                    m.bar_code || ''
                  }}</div>
                </template>
              </div>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{ m.num || '' }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.junk_type_name || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.subclass_code_name || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.gold_category_code_name || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.quality_code_name || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.classes_code_name || ''
                }}</div>
              </template>
            </div>

            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.original_type_name || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.junk_tag_code_name || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.sticker_price || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.gem_category_code_name || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.main_stone_weight || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.main_stone_num || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.main_stone_color_name || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.main_stone_neatness_name || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.main_stone_cut_name || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.vice_stone_weight || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.vice_stone_num || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.exchange_gold_price || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.original_gold_weight || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.piece_weight || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.gold_weight || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.lumping_weight || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.exchange_labour || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.deduct_amount || ''
                }}</div>
              </template>
            </div>
            <div class="t3 flex align-center justify-center">{{
              item.exchange_form
            }}</div>
            <div class="t3">
              <template v-for="(n, nindex) in item.exchange" :key="nindex">
                <div class="padding-y-10 border-b">{{ n.exchange_type }}</div>
              </template>
            </div>
            <!-- 换购小类 -->
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.deduct_amount || ''
                }}</div>
              </template>
            </div>
            <!-- 分抵金额 -->
            <div class="t3 flex align-center justify-center">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                {{ m.type_code_name || '' }}
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.member_name || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.member_mobile || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.main_salesman_name || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{
                  m.vice_salesman_name || ''
                }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{ m.bar_code || '' }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div class="padding-y-10 border-b">{{ m.note || '' }}</div>
              </template>
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div style="padding: 6px 0" v-if="m.thumb_url">
                  <a-image
                    :src="m.thumb_url"
                    style="width: 30px; height: 30px"
                  />
                </div>
              </template>
            </div>
            <div class="t3 flex align-center justify-center">
              {{ item.create_time || '' }}
            </div>
            <div class="t3">
              <template v-for="(m, mindex) in item.junk" :key="mindex">
                <div
                  class="ele-text-primary padding-y-10 border-b hands"
                  @click="toDetail(m)"
                  >查看</div
                >
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <vxe-pager
        size="mini"
        :current-page="page"
        :page-size="page_size"
        :total="total"
        :layouts="['Total', 'PrevPage', 'JumpNumber', 'NextJump', 'FullJump']"
        @page-change="handlePageChange"
      />
    </div>
  </div>
</template>
<script setup>
  import { ref, unref, reactive, onMounted } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
  import { actionFn } from '@/utils/action.js';
  import { daochuFn } from '@/utils/daochu.js';
  import { useRouter } from 'vue-router';
  import {
    PlusOutlined,
    UploadOutlined,
    ClearOutlined
  } from '@ant-design/icons-vue';
  import zbTable from '@/components/zbTable/purchasePurchaseIndex.vue';
  import { get_list } from '@/api/junk/junk_gram_info';
  import { consume_record } from '@/api/member/get_list';

  import {
    get_subclass_select,
    get_quality_select,
    get_gem_category_select,
    get_classes_select,
    get_sales_subject_select
  } from '@/api/material/select';

  const { currentRoute, push } = useRouter();
  const { query } = unref(currentRoute);

  const total = ref(0);
  const page = ref(1);
  const page_size = ref(10);
  const tableData = ref([]);

  const options = ref([]);
  const form = reactive({});
  const searchExpand = ref(true);

  // 表格搜索动态表单
  let searchData = ref([
    {
      label: '旧货小类',
      name: 'subclass_code',
      options: [],
      type: 'select'
    },
    {
      label: '成色',
      name: 'quality_code',
      options: [],
      type: 'select'
    },
    {
      label: '品类',
      name: 'classes_code',
      options: [],
      type: 'select'
    },
    {
      label: '旧货类型',
      name: 'quality_code',
      options: [
        {
          label: '按克',
          value: '1'
        },
        {
          label: '按件',
          value: '2'
        }
      ],
      type: 'select'
    },
    {
      label: '旧货标记',
      name: 'junk_target_code',
      options: [],
      type: 'select'
    },
    {
      label: '原售单位',
      name: 'original_type',
      options: [
        {
          label: '本店',
          value: '1'
        },
        {
          label: '外店',
          value: '2'
        }
      ],
      type: 'select'
    },
    {
      label: '换购形式',
      name: 'exchange_form',
      options: [
        {
          label: '一换一',
          value: '1'
        },
        {
          label: '一换多',
          value: '2'
        },
        {
          label: '多换一',
          value: '3'
        },
        {
          label: '多换多',
          value: '4'
        }
      ],
      type: 'select'
    },
    {
      label: '换购方式',
      name: 'exchange_type',
      options: [
        {
          label: '按克换按克',
          value: '1'
        },
        {
          label: '按件换按件',
          value: '2'
        },
        {
          label: '按克换按件',
          value: '3'
        },
        {
          label: '按件换按克',
          value: '4'
        }
      ],
      type: 'select'
    },
    {
      label: '换购小类',
      name: 'exchange_subclass_code',
      options: [],
      type: 'select'
    },
    {
      label: '宝石类别',
      name: 'gem_category_code',
      options: [],
      type: 'select'
    }
  ]);

  onMounted(() => {
    getList();
    //货品小类
    get_subclass_select({ page: 1, page_size: 9999 }).then((res) => {
      searchData.value[0].options = res;
      searchData.value[8].options = res;
    });
    //成色
    get_quality_select({ page: 1, page_size: 9999 }).then((res) => {
      searchData.value[1].options = res;
    });
    //货品品类
    get_classes_select({ page: 1, page_size: 9999 }).then((res) => {
      searchData.value[2].options = res;
    });
    //宝石类别
    get_gem_category_select({ page: 1, page_size: 9999 }).then((res) => {
      searchData.value[9].options = res;
    });
    //旧货标记
    get_sales_subject_select({
      page: 1,
      page_size: 9999,
      filters: { type: 'junk' }
    }).then((res) => {
      searchData.value[4].options = res;
    });
  });

  const daochu = () => {
    let data = {
      url: 'member/member_points/export',
      params: {},
      filename: ''
    };
    daochuFn(data);
  };
  const search = () => {
    getList();
  };
  const reset = () => {
    Object.keys(form).forEach((key) => {
      form[key] = null;
    });
  };

  /* 搜索展开/收起 */
  const toggleExpand = () => {
    searchExpand.value = !searchExpand.value;
  };

  const getList = () => {
    get_list({
      page: page.value,
      page_size: page_size.value,
      filters: form
    }).then((res) => {
      total.value = res.total;
      tableData.value = res.data;
    });
  };

  const handlePageChange = ({ currentPage, pageSize }) => {
    page.value = currentPage;
    page_size.value = pageSize;
    getList();
  };

  const toDetail = (item) => {
    console.log('---', item);
    push({
      path: `/junk/junk_gram_info/detail`,
      query: {
        code: item.code
      }
    });
  };
</script>

<style lang="less" scoped>
  .w45p {
    width: 45%;
  }
  .w5p {
    width: 10%;
    color: #d9d9d9;
  }
  .b {
    width: 50%;
    display: -webkit-box;
  }

  .t3 {
    background-color: #fff;
    width: 180px;
    border: 1px solid #f5f5f5;
    word-break: break-all;
    text-align: center;
    padding: 15px 0;
  }

  .w {
    width: 7200px;
    display: -webkit-box;
  }

  .bg1 {
    width: 7200px;
    background-color: #f5f5f5;
    line-height: 30px;
    clear: both;
    overflow: hidden;
  }

  .bg2 {
    background-color: #f5f5f5;
    padding: 8px;
  }

  .t2 {
    float: left;
    width: 180px;
    min-height: 42px;
    line-height: 42px;
    text-align: center;
  }

  .border-b:not(:last-of-type) {
    border-bottom: 1px solid #f5f5f5;
  }
  .border-b {
    height: 43px;
  }
</style>
